﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />
    <script src="js/jquery_2_1_min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/FastHttpApi.js"></script>
    <script src="js/api.js"></script>
    <title>FastHttpApi WebApplication</title>
</head>
<body>

    <div class="container bs-docs-container">


        <div class="row">
            <div class="col-md-9" role="main">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">FastHttpApi http and websocket api</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->

                    </div><!-- /.container-fluid -->
                </nav>
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="/">Orders</a></li>
                    <li role="presentation"><a href="/Employees.html">Employees</a></li>
                </ul>
                <div id="connectStatus" style="display:flex;padding-bottom:10px;"> </div>
                <div class="panel panel-default">

                    <div class="panel-body">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="exampleInputName2">Employee:</label>
                                <select id="lstEmployees" style="margin:5px;">
                                    <option value=""></option>
                                    <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail2">Customer:</label>
                                <select id="lstCustomers" style="margin:5px;">
                                    <option value=""></option>
                                    <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option>
                                </select>
                            </div>
                            <br />
                            <button type="button" onclick="searchOrder(0)" class="btn btn-default">Search</button>
                        </form>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>OrderID</th>
                                    <th>ShipName</th>
                                    <th>ShipAddress</th>
                                    <th>City</th>
                                    <th>OrderDate</th>
                                </tr>
                            </thead>
                            <tbody id="lstbody">
                                <tr v-for="item in Data.Items">
                                    <td></td>
                                    <td>{{item.OrderID}}</td>
                                    <td>{{item.ShipName}}</td>
                                    <td>{{item.ShipAddress}}</td>
                                    <td>{{item.City}}</td>
                                    <td>{{item.OrderDate}}</td>
                                </tr>
                            </tbody>
                        </table>

                        <nav aria-label="Page navigation">
                            <ul id="pagination" class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="javascript:void(0)" onclick="searchOrder(0)">1</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
        var app6;
        $(document).ready(function () {
            app6 = new Vue({
                el: '#lstbody',
                data: { Data: [] }
            });
            init();
        });

        async function init() {
            var result = await HomeGetEmployeesName();
            var app4 = new Vue({
                el: '#lstEmployees',
                data: result
            });

            result = await HomeGetCustomersName();
            var app5 = new Vue({
                el: '#lstCustomers',
                data: result
            });
            searchOrder(0);
        }

        async function searchOrder(index) {
            var result = await HomeListOrders($('#lstEmployees').val(), $('#lstCustomers').val(), index);
            app6.Data = result.Data;
            pagination(index, result.Data.Pages);
        }

        function pagination(index, pages) {
            $('#pagination').empty();
            if (pages < 10) {
                for (i = 0; i < pages; i++) {
                    var item = '<li><a page="' + i + '" href="javascript:void(0)" onclick="searchOrder(' + i + ')">' + (i + 1) + '</a></li>'
                    $('#pagination').append(item);
                }
            }
            else {
                var item = '<li><a page="' + 0 + '" href="javascript:void(0)" onclick="searchOrder(0)">1</a></li>'
                $('#pagination').append(item);


                for (i = index - 5; i < index + 1; i++) {
                    if (i > 0 && i < pages - 1) {
                        var item = '<li><a page="' + i + '" href="javascript:void(0)" onclick="searchOrder(' + i + ')">' + (i + 1) + '</a></li>'
                        $('#pagination').append(item);
                    }
                }


                for (i = index + 1; i < index + 5; i++) {
                    if (i < (pages - 1)) {
                        var item = '<li><a page="' + i + '" href="javascript:void(0)" onclick="searchOrder(' + i + ')">' + (i + 1) + '</a></li>'
                        $('#pagination').append(item);
                    }
                }
                if (pages > 1) {
                    var item = '<li><a page="' + (pages - 1) + '" href="javascript:void(0)" onclick="searchOrder(' + (pages - 1) + ')">' + (pages) + '</a></li>'
                    $('#pagination').append(item);
                }
            }
            $('a').each(function () {
                if ($(this).attr('page') == index) {
                    $(this).html('<span class="badge">' + (index + 1) + '</span>')
                }
            })
        }

    </script>
</body>

</html>